---
title: Animation
description: Yamada UI provides features to easily achieve the animation you want.
---

## Usage

```tsx preview
<Box
  w="fit-content"
  bg="bg.contrast"
  color="fg.contrast"
  p="md"
  animationDirection="alternate"
  animationDuration="1s"
  animationIterationCount="infinite"
  animationTimingFunction="linear"
  _keyframes={{
    from: { translate: "0 0" },
    to: { translate: "100% 0" },
  }}
>
  Box
</Box>
```

You can also use [theme](/docs/theming) [keyframes](/docs/theming/tokens/keyframes) to apply common keyframes throughout your application. Using `animationName` or `_keyframes` is recommended.

```tsx preview
<Box
  w="fit-content"
  bg="bg.contrast"
  color="fg.contrast"
  p="md"
  animationName="fade-in"
  animationDirection="alternate"
  animationDuration="1s"
  animationIterationCount="infinite"
  animationTimingFunction="linear"
>
  Box
</Box>
```

### Use Theme Tokens

To use [theme](/docs/theming) [animations](/docs/theming/tokens/animations), set the `animation` property.

```tsx preview
<Box
  w="fit-content"
  bg="bg.contrast"
  color="fg.contrast"
  p="md"
  animation="fade-in"
>
  Box
</Box>
```

:::warning
By default, no animation tokens are defined.
:::

## Components

Yamada UI provides components that make animations easier to implement.

::::card-group
:::card{title="Motion" href="/docs/components/motion"}

A convenient component that extends the Yamada UI [Style Props](/docs/styling/style-props) to [Motion](https://motion.dev/).

:::
:::card{title="Airy" href="/docs/components/airy"}

A component that provides an animation that smoothly switches between two elements.

:::
:::card{title="Collapse" href="/docs/components/collapse"}

A component that expands or collapses an element to display it.

:::
:::card{title="FadeScale" href="/docs/components/fade-scale"}

A component that gradually expands or shrinks an element to display or hide it.

:::
:::card{title="Fade" href="/docs/components/fade"}

A component that gradually displays or hides an element.

:::
:::card{title="Flip" href="/docs/components/flip"}

A component that provides an animation that flips between two elements.

:::
:::card{title="Ripple" href="/docs/components/ripple"}

A component that provides a ripple effect to an element to recognize if the user has clicked it.

:::
:::card{title="Rotate" href="/docs/components/rotate"}

A component that provides an animation that rotates between two elements.

:::
:::card{title="Skeleton" href="/docs/components/skeleton"}

A component that functions as a placeholder until the content is loaded.

:::
:::card{title="SlideFade" href="/docs/components/slide-fade"}

A component that gradually displays or hides an element from a specified position.

:::
:::card{title="Slide" href="/docs/components/slide"}

A component that displays or hides an element from the corner of the page.

:::
::::

## Hooks

Yamada UI provides convenient custom hooks for animations.

::::card-group
:::card{title="useAnimation" href="/docs/hooks/use-animation"}

A custom hook that implements animations similar to CSS `keyframes`.

:::
:::card{title="useDynamicAnimation" href="/docs/hooks/use-dynamic-animation"}

A custom hook that is used to switch animations.

:::
::::
